"use client"

import dynamic from 'next/dynamic';

import {ModeToggle} from "@/components/mode-toggle";

const Canvas = dynamic(() => import('@/components/konva/canvas'), {
    ssr: false,
});

export default function DesignPage() {
    const defaultValue = {
        background: {
            // backgroundImage:"https://images.pexels.com/photos/30352190/pexels-photo-30352190.jpeg?auto=compress&cs=tinysrgb&w=630&h=375&dpr=2",
            width: 600,
            height: 600,
        },
        content: [
            {
                type: "text",
                id: 'text_1',
                text: {
                    text: "123",
                    x: 40,
                    y: 60,
                    width: 400,
                    height: 30,
                    fill: "#d20808",
                    fontSize: 40,
                    align: "center",
                }
            }
        ]
    }

    return (
        <div className="overflow-hidden">
            <div className="bg-zinc-50 dark:bg-zinc-900">
                <Canvas defaultValue={defaultValue}/>
            </div>
            <div className="absolute top-1 right-1 z-0">
                <ModeToggle/>
            </div>
        </div>


    )
}